<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/stylesheets/apply.css">
    <title>报名表</title>
</head>

<body>

    <!-- head -->
    <div class="head">
        <h1>校科联</h1>
        <a href="/out" class="bi-person-square"></a>
    </div>



    <!--  page-->
    <div class="page">
        <h3>填写报名表</h3>
        <form action="/apply" method="post" enctype="multipart/form-data">
            <div class="photo">

                <label for="avatarInput">
                    <div class="pic">
                        <img src="./images/profile.jpg" alt="" id="avatarPreview">
                    </div>
                </label>
                <input type="file" class="pinput" name="avatar" id="avatarInput" style="display: none;">
            </div>


            <div class="field">
                <span>姓名&nbsp;</span>
                <input type="text" name="name">
            </div>

            <div class="field">
                <span>性别&nbsp;</span>
                <select name="gender" id="">
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>
            <div class="field">
                <span>学院&nbsp;</span>
                <select name="college" id="">
                    <option value="1">海洋学院</option>
                    <option value="2">国际教育学院</option>
                    <option value="3">工程学院</option>
                    <option value="4">食品学院</option>
                    <option value="5">经济管理学院</option>
                    <option value="6">公共管理学院</option>
                    <option value="7">资源环境学院</option>
                    <option value="8">生命科学学院</option>
                    <option value="9">动物科学学院</option>
                    <option value="10">兽医学院</option>
                    <option value="11">园艺学院</option>
                    <option value="12">农学院</option>
                    <option value="13">林学与风景园林学院</option>
                    <option value="14">电子工程学院(人工智能学院)</option>
                    <option value="15">水利与土木工程学院</option>
                    <option value="16">人文与法学学院</option>
                    <option value="17">材料与能源学院</option>
                    <option value="18">数学与信息学院(软件学院)</option>
                    <option value="19">外国语学院</option>
                    <option value="20">艺术学院</option>
                    <option value="21">植物保护学院</option>
                    <option value="22">马克思主义学院</option>

                </select>
            </div>

            <div class="field">
                <span>专业&nbsp;</span>
                <input type="text" name="major">
            </div>
            <div class="field specone">
                <span>手机&nbsp;</span>
                <input type="text" name="number" class="number">
            </div>

            <div class="field">
                <span>第一志愿部门&nbsp;</span>
                <select name="first" id="">
                    <option value="1">自科部</option>
                    <option value="2">社科部</option>
                    <option value="3">办公室</option>
                    <option value="4">财务部</option>
                    <option value="5">项目部</option>
                    <option value="6">外联部</option>
                    <option value="7">宣传部</option>
                    <option value="8">策划部</option>
                    <option value="9">竞赛部</option>
                    <option value="10">新闻部</option>
                    <option value="11">运营部</option>
                </select>
            </div>
            <div class="field">
                <span>第二志愿部门&nbsp;</span>
                <select name="second" id="">
                    <option value="1">自科部</option>
                    <option value="2">社科部</option>
                    <option value="3">办公室</option>
                    <option value="4">财务部</option>
                    <option value="5">项目部</option>
                    <option value="6">外联部</option>
                    <option value="7">宣传部</option>
                    <option value="8">策划部</option>
                    <option value="9">竞赛部</option>
                    <option value="10">新闻部</option>
                    <option value="11">运营部</option>
                    <option value="12">无</option>
                </select>
            </div>
            <div class="field">
                <span>面试方式&nbsp;</span>
                <select name="way" id="">
                    <option value="1">创客空间线下面试</option>
                </select>
            </div>


            <textarea class="remark" name="remark" id="" cols="30" rows="10" placeholder="个人简介(不少于20字)"></textarea>
            <div class="total">
                0/300字
            </div>
            <div class="intr">作品图片(可选)</div>
            <div class="work">
                <input type="file" id="one" name="one" style="display: none;">
                <input type="file" id="two" name="two"  style="display: none;">
                <input type="file" id="three" name="three"  style="display: none;">
                <div class="show">
                    <label for="one">
                        <div class="mod"><img src="./images/work.jpg" alt="" id="workone"></div>
                    </label>
                    <label for="two">
                        <div class="mod"><img src="./images/work.jpg" alt="" id="worktwo"></div>
                    </label>
                    <label for="three">
                        <div class="mod"><img src="./images/work.jpg" alt="" id="workthree"></div>
                    </label>
                </div>
            </div>

            <button type="submit">提交</button>

        </form>
    </div>

    <div class="func"></div>
    <!-- fixed -->

    <div class="fixed">

        <a href="/prehome" class="bi-house-door-fill"></a>
        <a href="" class="bi-bar-chart-fill"></a>
        <a href="" class="bi-envelope"></a>
    </div>



    <script src="/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
    <script>
        const tot = document.querySelector('.total')
            const txt = document.querySelector('textarea')
            txt.addEventListener('input', () => {
                tot.innerHTML = `${txt.value.length}/300字`
            })
            
        document.getElementById('avatarInput').addEventListener('change', function (event) {
                var input = event.target;
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    // 当文件读取完成时触发load事件
                    reader.onload = function (e) {
                        // 将Base64格式的图片数据赋值给img标签的src属性
                        document.getElementById('avatarPreview').src = e.target.result;
                        // 显示预览图
                        /* document.getElementById('avatarPreview').style.display = 'block'; */
                    };

                    // 读取图片为DataURL（Base64编码）
                    reader.readAsDataURL(input.files[0]);
                }
            }, false);
            /*  1*/
             document.getElementById('one').addEventListener('change', function (event) {
                    var input = event.target;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();

                        // 当文件读取完成时触发load事件
                        reader.onload = function (e) {
                            // 将Base64格式的图片数据赋值给img标签的src属性
                            document.getElementById('workone').src = e.target.result;
                            // 显示预览图
                            /* document.getElementById('avatarPreview').style.display = 'block'; */
                        };

                        // 读取图片为DataURL（Base64编码）
                        reader.readAsDataURL(input.files[0]);
                    }
                }, false);
            /* 2 */
             document.getElementById('two').addEventListener('change', function (event) {
                    var input = event.target;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();

                        // 当文件读取完成时触发load事件
                        reader.onload = function (e) {
                            // 将Base64格式的图片数据赋值给img标签的src属性
                            document.getElementById('worktwo').src = e.target.result;
                            // 显示预览图
                            /* document.getElementById('avatarPreview').style.display = 'block'; */
                        };

                        // 读取图片为DataURL（Base64编码）
                        reader.readAsDataURL(input.files[0]);
                    }
                }, false);
            /* 3 */
             document.getElementById('three').addEventListener('change', function (event) {
                    var input = event.target;
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();

                        // 当文件读取完成时触发load事件
                        reader.onload = function (e) {
                            // 将Base64格式的图片数据赋值给img标签的src属性
                            document.getElementById('workthree').src = e.target.result;
                            // 显示预览图
                            /* document.getElementById('avatarPreview').style.display = 'block'; */
                        };

                        // 读取图片为DataURL（Base64编码）
                        reader.readAsDataURL(input.files[0]);
                    }
                }, false);

                /* limit */
                const field=document.querySelector('.specone')
                var form = document.querySelector('form');
                form.addEventListener('submit', function (event) {
                        event.preventDefault(); // 阻止默认提交行为

                        var phoneNumberInput = document.querySelector('.number');
                    var phoneNumber = phoneNumberInput.value.trim();

                    // 验证手机号码格式（仅限11个数字）
                    var isValidPhoneNumber = /^\d{11}$/.test(phoneNumber);

                    if (!isValidPhoneNumber) {
                        phoneNumberInput.classList.add('invalid');
                        field.classList.add('invalids')
                        alert('手机号码格式错误');
                        return;
                    }


                    var introductionInput = document.querySelector('.remark');
                    var introduction = introductionInput.value.trim();

                    // 验证自我介绍长度（不少于20个字符）
                    var isValidIntroduction = /^.{20,}$/.test(introduction);

                    if (!isValidIntroduction) {
                        introductionInput.classList.add('invalid');
                        introductionInput.classList.add('invalids');
                        alert('自我介绍不少于20字');
                        return;
                    }

                    if(isValidPhoneNumber||isValidIntroduction){
                        if(isValidIntroduction){
                            introductionInput.classList.remove('invalid')
                            introductionInput.classList.remove('invalids')
                        }
                        if(isValidPhoneNumber){
                            phoneNumberInput.classList.remove('invalid')
                            field.classList.remove('invalids')
                        }
                        if(isValidPhoneNumber&& isValidIntroduction){
                            form.submit()
                        }
                        return 
                    }



        


                })
    </script>
</body>

</html>